<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xmlns="https://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <link href="${ctx}/res/umaker/css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${ctx}/res/umaker/js/jquery.js"></script>
    <link href="${ctx}/res/back_main/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="${ctx}/res/back_main/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="${ctx}/res/back_main/css/style.css?v=2.2.0" rel="stylesheet">
    <link href="${ctx}/res/back_main/css/animate.css" rel="stylesheet">

    <!-- hightcharts -->
    <script type="text/javascript" src="${ctx}/res/umaker/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/res/highcharts/js/highcharts.js"></script>
    <script type="text/javascript" src="${ctx}/res/highcharts/js/exporting.js"></script>
    <style type="text/css">
        .shueyu input{width: 31px; height: 28px; border: 1px solid #DDD; text-align: center; margin: 0px 3px}
        .shueyu{display: inline; width: 65px; padding: 0px 10px;padding-right: 0px;float: left;margin-right: 14px}
        .paginItem{
            float: left;
            margin-top: 6px;
        }

        #DataTables_Table_0_info .blue {
            color: #056dae;
            font-style:normal;
        }
        .day li{
            float: left;
            margin-left: 10px;
        }
        #container{
            margin-bottom: 22px;
        }
    </style>
    <script>
        var pageNo = 1;
        var totalPage = 1;
        $(function(){
            $("#pageNo").keydown(function(event){
                if(event.which == "13"){
                    var cur = $(this).val();
                    if(0<cur && cur <= totalPage){
                        pageNo = cur;
                        load1();
                    }
                }
            });
            load1();
        })
    </script>
    <script>
        var chart;
        $(function () {
             chart=new Highcharts.Chart({
                chart: {
                    renderTo: 'container', //DIV容器ID
                    type: 'column'
                },
                title: {
                    text: '工单数据总详情'
                },
                /*subtitle: {
                    text: '来源: 育儿问一问'
                },*/
                lang: {
                    printChart: '打印图表',
                    downloadPNG: '下载JPEG 图片',
                    downloadJPEG: '下载JPEG文档',
                    downloadPDF: '下载PDF 文件',
                    downloadSVG: '下载SVG 矢量图',
                    contextButtonTitle: '下载图片'
                },
                xAxis: {

                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'count'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                exporting: {
                    enabled: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '工单量',
                    //data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    name: '已评价',
                }, {
                    name: '未评价',
                }, {
                    name: '满意',
                }, {
                    name: '一般',
                }, {
                    name: '不满意',
                }]
                });
                getDateSearch();

        });
        function getDateSearch(date){
                $.ajax({
                    url:"${ctx}/backorderdmp/search",
                    type: "post",
                    dataType: "json",
                    data: {
                        "date": date,
                    },
                    success:function(result){
                        chart.xAxis[0].setCategories(result.time_period);
                        chart.series[0].setData(result.order_total);
                        chart.series[1].setData(result.is_eval);
                        chart.series[2].setData(result.not_eval);
                        chart.series[3].setData(result.satisfied);
                        chart.series[4].setData(result.common);
                        chart.series[5].setData(result.dissatisfied);
                    }

                });
            load1(date);
        }
        var temp = '<tr class="gradeA"><td>{date_time}</td><td >{time_period}</td><td>{order_total}</td><td>{is_eval}</td><td>{not_eval}</td><td>{satisfied}</td><td>{common}</td><td>{dissatisfied}</td></tr>';
        function load1(date){
            $.post("${ctx}/backorderdmp/searchList",
                    {"date": date,pageNo:pageNo},
                    function(r){
                        if(r.success){
                            alert(r);
                            totalPage = r.data.totalPage;
                            $("#pageNo").val(pageNo);
                            $("#totalPage").html(totalPage);
                            $(".complaint").empty();
                            if(r.data.totalRow>0) {
                                $.each(r.data.list, function (k, v) {
                                    $(".complaint").append(temp.replace(/{date_time}/,v.date_time).replace(/{time_period}/,v.time_period).replace(/{order_total}/, v.order_total).replace(/{is_eval}/, v.is_eval).replace(/{not_eval}/, v.not_eval).replace(/{satisfied}/, v.satisfied).replace(/{common}/, v.common).replace(/{dissatisfied}/, v.dissatisfied));
                                });
                            }
                        }else{
                            $(".complaint").empty();
                        }

                    });
        }
        function firstpage(){
            if(pageNo>1){
                pageNo=1;
                load1();
            }
        }
        function prevpage(){
            if(pageNo>1){
                pageNo--;
                load1();
            }
        }
        function nextpage(){
            if(pageNo<totalPage){
                pageNo++;
                load1();
            }
        }
        function lastpage(){
            if(pageNo<totalPage){
                pageNo=totalPage;
                load1();
            }
        }
    </script>
</head>
<body style="background-color: #ffffff">
<div class="day">
        <li class="yesterday"><a onclick="getDateSearch()">昨日</a></li>
        <li class="time_3days"><a onclick="getDateSearch('time_3days')">过去3天</a></li>
        <li class="time_7days"><a onclick="getDateSearch('time_7days')">过去7天</a></li>
        <li class="time_30days"><a onclick="getDateSearch('time_30days')">过去30天</a></li>
</div>
<div id="container" style="min-width:700px;height:400px"></div>
<div class="ibox-content">
    <table class="table table-striped table-bordered table-hover dataTables-example">
        <thead>
        <tr>
            <th>日期</th>
            <th>时间段</th>
            <th>工单量</th>
            <th>已评价</th>
            <th>未评价</th>
            <th>满意</th>
            <th>一般</th>
            <th>不满意</th>
        </tr>
        </thead>
        <tbody class="complaint">
            <tr class="gradeA"></tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col-sm-6">
            <div aria-relevant="all" aria-live="polite" role="alert" id="DataTables_Table_0_info" class="dataTables_info">
            </div>
        </div>
        <div class="col-sm-6">
            <div id="DataTables_Table_0_paginate" class="dataTables_paginate paging_simple_numbers">
                <ul class="pagination">
                    <li id="111" tabindex="0" aria-controls="DataTables_Table_0" class="paginate_button previous"><a onclick="firstpage()">首页</a></li>
                    <li id="DataTables_Table_0_next" tabindex="0" aria-controls="DataTables_Table_0" class="paginate_button next"><a onclick="prevpage()">上一页</a></li>
                    <li class="shueyu">第<input id="pageNo" value="1">页</li>
                    <li class="paginItem">/<i id="totalPage" class="blue">1</i>页</li>
                    <li id="DataTables_Table_0_next" tabindex="0" aria-controls="DataTables_Table_0" class="paginate_button next"><a onclick="nextpage()">下一页</a></li>
                    <li id="222" tabindex="0" aria-controls="DataTables_Table_0" class="paginate_button previous"><a onclick="lastpage();">末页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>